<template>
    <div class="index">
        <el-row>
            <el-col :span='4' class="layout-left-panel">
                <left-bar></left-bar>
                <div class="bottom-btns">
                    <div class="setting">
                        <i class="el-icon-setting"></i>
                        设置
                    </div>
                    <div class="login-out" @click="loginOut">
                        <i class="el-icon-setting"></i>
                        退出
                    </div>
                </div>
            </el-col>
            <el-col :span='20' :offset='4'>
                <transition name="move" mode="out-in">
                    <router-view></router-view>
                </transition>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import vSidebar from '@/components/common/Sidebar'
import LeftBar from '@/components/layouts/leftBar'
import { mapActions } from 'vuex'

export default {
    data: () => ({
        windowHeight: window.innerHeight
    }),
    components: {
        vSidebar,
        LeftBar
    },
    mounted() {
        this.windowHeight = window.innerHeight
    },
    methods: {
        ...mapActions([
            'logoutAction'
        ]),
        loginOut() {
            this.logoutAction()
            this.$message.info('注销成功！');
            this.$router.push('/login')
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.layout-left-panel {
    position: fixed;
    height: 100%;
    background-color: #27292e;

    .bottom-btns {
        position: absolute;
        bottom: 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        width: 100%;

        >div {
            margin: 30px 20px;
            opacity: 0.5;
            font-size: 12px;
            color: #c0ccda;
            letter-spacing: 0;
            cursor: pointer;
        }
    }
}
</style>
